"""
@author: Gaoyaoxia
@date: 2021-03-03 17:32:40
"""
<!-- 届次委员信息列表 -->
<template>
  <div class="base-table-box">
    <div class="list-search">
      <!-- 检索 -->
      <div class="list-search-simple">
        <div class="search-inline">
          <div class="search-item">
            <s-select
              :selectOption="strSIds"
              v-model="params.strSId"
              style="width: 80px"
            ></s-select>
            <s-select
              :selectOption="member.sectorType"
              v-model="params.strSector"
              style="width: 90px"
            ></s-select>
            <s-select
              :selectOption="member.infoType"
              v-model="params.type"
              style="width: 102px"
            ></s-select>
          </div>
          <div class="search-item">
            <a-input placeholder="请输入搜索内容" />
          </div>

          <div class="search-item btn-group">
            <a-button type="primary" @click="onSearch">查询</a-button>
            <a-button class="btn-reset" @click="onReset">重置</a-button>
            <a-button type="primary" @click="openDrop" class="high-search-btn">
              <i class="icon suncnui suncnui-icon-shaixuanchaxun" />
              高级查询</a-button
            >
          </div>
        </div>
        <!-- 按钮 -->
        <div class="upper-right">
          <div class="btn-group">
            <a-button type="primary" class="btn" @click="add">新增</a-button>
            <a-button @click="exportVisible = true">列表导出</a-button>
            <menu-button
              @menuClick="handleMenuClick"
              :menus="[
                { key: 'memImport', label: '委员导入' },
                { key: 'setColNum', label: '设置列数' },
                { key: 'sessionResize', label: '届中调整' }
              ]"
            ></menu-button>
          </div>
        </div>
      </div>
      <!-- 高级检索 -->
      <drawer
        :show="isShowForm"
        :active="isActive"
        :close="isClose"
        @closeDrop="closeDrop"
      >
        <mem-high-form @search="onHighSearch" type="sessionMgt"></mem-high-form>
      </drawer>
    </div>
    <!-- 列表 -->
    <a-table
      :row-selection="{
        selectedRowKeys: selectedRowKeys,
        onChange: onSelectChange
      }"
      :pagination="pagination"
      :columns="columns"
      :data-source="tableData"
      :loading="loading"
      :scroll="{ x: 820, y: 627 }"
      style="margin-top: 20px"
    >
      <span slot="name" slot-scope="text, record">
        <router-link
          class="link-a"
          :to="{
            path: 'memsessionlist/detail',
            query: { id: record.id }
          }"
          >{{ text }}</router-link
        >
      </span>
      <span slot="action" slot-scope="text, record">
        <router-link
          :to="{
            path: 'memsessionlist/upatemember',
            query: { id: record.id }
          }"
          >修改</router-link
        >
        <a @click="onDelete(record)" class="btn-space">删除</a>
      </span>
    </a-table>
    <!-- 列表导出弹窗 -->
    <transfer-modal
      title="委员信息导出"
      :visible="exportVisible"
      :mockData="mockData"
      :currentKeys="targetKeys"
      @getColumns="getColumns"
      @ok="handleExportOk"
      @cancel="exportVisible = false"
    >
      <div class="export-radio-group">
        <span>导出范围：</span>
        <a-radio-group :options="member.exprotOptions" v-model="exportType" />
      </div>
    </transfer-modal>
    <!-- menubtn选择弹窗 -->
    <!-- 委员导入 -->
    <choice-modal
      :visible.sync="choiceVisible"
      @close="choiceVisible = false"
      v-bind:form="form"
    >
      <s-select
        v-model="form.query_strPoliticalMember"
        :selectOption="member.isYes"
        placeholder="--党员--"
        style="width: 100px"
      ></s-select>
      <s-select
        v-model="form.query_strJG"
        :selectOption="strJGs"
        placeholder="--籍贯--"
        style="width: 100px"
      ></s-select>
      <s-select
        v-model="form.query_strSex"
        :selectOption="member.sexType"
        placeholder="--性别--"
        style="width: 100px"
      >
      </s-select>
    </choice-modal>
    <!-- 设置列数 -->
    <transfer-modal
      :visible="setColVisible"
      :mockData="mockData"
      :currentKeys="targetKeys"
      @getColumns="getColumns"
      @ok="hanldeColsOk"
      @cancel="setColVisible = false"
    />
    <!-- 届中调整 -->
    <s-modal
      :visible="sessionVisible"
      title="届中调整"
      width="520px"
      :model="sessionForm"
      @cancel="sessionVisible = false"
      @ok="handleResize"
    >
      <div class="form-body">
        <a-form-model-item label="出缺类型" required>
          <a-select
            v-model="sessionForm.memStatus"
            placeholder="--请选择出缺类型--"
          >
            <a-select-option value="1">正常</a-select-option>
            <a-select-option value="2">出缺</a-select-option>
          </a-select>
        </a-form-model-item>
      </div>
    </s-modal>
  </div>
</template>

<script>
import MenuButton from 'components/base/menuButton.vue'
import { member } from 'assets/js/select-option-list'
import { deepCopy } from 'assets/js/utils'
import paging from 'mixins/paging'
import Drawer from 'components/base/drawer.vue'
import MemHighForm from 'components/form/memHighForm.vue'
import TransferModal from 'components/base/transferModal.vue'
import ChoiceModal from 'components/base/choiceModal.vue'
const initColumns = [
  {
    title: '姓名',
    dataIndex: 'name',
    width: 120,
    fixed: 'left',
    scopedSlots: { customRender: 'name' },
    sorter: (a, b) => a.name.length - b.name.length
  },
  {
    title: '届中状态',
    dataIndex: 'memStatus',
    width: 120,
    fixed: 'right',
    sorter: (a, b) => a.name.length - b.name.length
  },
  {
    title: '是否常委',
    dataIndex: 'isCommittee',
    width: 120,
    fixed: 'right',
    sorter: (a, b) => a.name.length - b.name.length
  },

  {
    title: '是否连任',
    dataIndex: 'isContinue',
    width: 120,
    fixed: 'right',
    sorter: (a, b) => a.name.length - b.name.length
  },

  {
    title: '操作',
    dataIndex: 'action',
    width: 120,
    fixed: 'right',
    scopedSlots: { customRender: 'action' }
  }
]
export default {
  components: {
    MenuButton,
    Drawer,
    TransferModal,
    MemHighForm,
    ChoiceModal
  },
  data() {
    return {
      initColumns,
      member,
      //高级检索表单
      isShowForm: false,
      isActive: false,
      isClose: true,
      highForm: {
        strSId: undefined,
        isContinue: '',
        isCommittee: '',
        strSector: undefined,
        strFaction: undefined,
        memStatus: undefined,
        group: undefined,
        strOrg: undefined,
        strDtuy: undefined,
        strNation: undefined,
        strJG: undefined,
        strFullEdu: undefined,
        strDutyTag: undefined,
        strAgeRange: undefined,
        strFunction: ''
      },
      //普通检索参数
      strSIds: [
        { key: '0', label: '1404' },
        { key: '1', label: '1304' }
      ],
      params: {
        strSId: '1404',
        strSector: '',
        type: ''
      },
      //列表导出
      exportVisible: false,
      exportType: '',
      //委员导入
      choiceVisible: false,
      strJGs: [],
      form: {
        query_strPoliticalMember: undefined,
        query_strJG: undefined,
        query_strSex: undefined,
        keywords: ''
      },
      //设置列数
      setColVisible: false,
      initKeys: [],
      //届中调整
      sessionVisible: false,
      sessionForm: {
        memStatus: undefined
      },
      //table相关
      loading: false,
      tableData: [],
      mockData: [],
      columns: [],
      targetKeys: []
    }
  },
  mixins: [paging],
  mounted() {
    this.getTableColsData()
  },
  methods: {
    //获得当前列项
    getTableColsData() {
      //请求获取列项
      this.mockData = [
        {
          title: '性别',
          key: 'sex',
          dataIndex: 'sex',
          chosen: true,
          //sorter: true
        },
        {
          title: '籍贯',
          key: 'strJG',
          dataIndex: 'strJG',
          chosen: false,
          //sorter: true
        },
        {
          title: '学历',
          key: 'education',
          dataIndex: 'education',
          chosen: false,
          sorter: true
        },
        {
          title: '界别',
          key: 'strSector',
          dataIndex: 'strSector',
          chosen: false,
          sorter: true
        },
        {
          title: '党派',
          key: 'strFaction',
          dataIndex: 'strFaction',
          chosen: true,
          sorter: true
        },
        {
          title: '届内机构',
          key: 'strOrg',
          dataIndex: 'strOrg',
          chosen: false,
          sorter: true
        },
        {
          title: '工作单位职务',
          key: 'strDuty',
          dataIndex: 'strDuty',
          chosen: false,
          sorter: false
        }
      ]
      let targetKeys = []
      let targetCols = []
      this.mockData.forEach((item, index) => {
        if (item.chosen) {
          targetKeys.push(item.key)
          targetCols.push(item)
        }
      })
      this.targetKeys = targetKeys
      this.getColumns(targetCols)
    },
    getTableData() {
      for (let i = 0; i < this.pagination.pageSize; i++) {
        this.tableData.push({
          id: `ID${i}`,
          key: i,
          name: `King ${i}`,
          sex: '男',
          strJG: '皖',
          education: '本科',
          strSector: '民革',
          strFaction: '中共',
          strOrg: '',
          strDuty: '商信政通',
          memStatus: '正常',
          isCommittee: '否',
          isContinue: '否'
        })
      }
      this.pagination.total = 200
    },
    //新增委员信息
    add() {
      this.$router.push('memsessionlist/addmember')
    },
    //删除该委员记录
    onDelete(record) {
      this.$confirm({
        title: '您是否确认要操作所选中的记录？',
        onOk() {
          //请求删除接口
        },
        onCancel() {}
      })
    },
    //列表导出回调
    handleExportOk() {},
    //扩展按钮（...）下拉选择事件回调
    handleMenuClick(key) {
      if (key == 'memImport') {
        this.choiceVisible = true
      } else if (key == 'setColNum') {
        this.setColVisible = true
      } else if (key == 'sessionResize') {
        this.sessionVisible = true
      }
    },
    /**设置列数弹窗确定和重置回调 */
    hanldeColsOk(targetCols) {
      console.log("设置:", targetCols)
      if (targetCols.length > 0) {
        this.getColumns(targetCols)
        this.setColVisible = false
      } else {
        this.$message.warning('列出项不能为空, 请选择列出项')
        return
      }
    },
    /**届内调整弹窗确定回调 */
    handleResize() {},
    /**普通检索的查询和重置回调 */
    onSearch() {
      console.log('参数:', this.params)
    },
    /**高级检索的查询和重置回调 */
    onHighSearch(formParam) {
      this.params = Object.assign(this.params, formParam)
      console.log('参数:', this.params)
    },
    onReset() {
      this.params = {
        strSId: '1404',
        strSector: '',
        type: ''
      }
    },
    //高级检索表单展开事件
    openDrop() {
      setTimeout(() => {
        this.isShowForm = true
        this.isActive = true
      }, 300)
      this.isClose = false
    },
    //高级检索表单收起事件
    closeDrop() {
      this.isClose = true
      setTimeout(() => {
        this.isShowForm = false
      }, 200)
    },
    //获取所有列项
    getColumns(columns) {
      columns = columns.map((item) => {
        item = {
          title: item.title,
          dataIndex: item.dataIndex,
          key: item.key,
          width: item.title.length < 4 ? 100 : 180,
          sorter: item.sorter ? (a, b) => a.name.length - b.name.length : null
        }
        return item
      })

      let columnList = deepCopy(this.initColumns)
      columnList.splice(1, 0, ...columns)
      this.columns = columnList
      console.log("列头:", columns)
    }
  },
  created() {}
}
</script>
<style lang='less' scoped>
/deep/.ant-form {
  padding: 0px 0px 0px 15px;
}
/**table样式 */
/deep/.ant-table-content {
  border: none;
}
/deep/.ant-table-wrapper > div > div > div > div > div {
  border: 1px solid #e8e8e8;
}
.form-body {
  height: 200px;
  /deep/.ant-select {
    height: 40px;
    line-height: 40px;
    font-size: 16px;
  }
  /deep/.ant-select-selection--single {
    height: 40px;
  }
  /deep/.ant-select-selection__rendered {
    line-height: 40px;
  }
}
/deep/.ant-select-selection__placeholder {
  color: #333;
}
/deep/.ant-select-dropdown-menu-item {
  font-size: 16px;
}
.export-radio-group {
  text-align: center;
  font-size: 16px;
  color: #333;
  /deep/.ant-radio-wrapper {
    font-size: 16px;
    color: #333;
  }
}
</style>